<template>
    <ayjDialog ref="dialoRef" :title="'设备详情'" width="30%" :slotFooter="false" :height="800">
        <div>
            <div class="costom-row">
                <div class="costom-info">
                    <div class="title">设备编号：</div>
                    <div class="data">{{ rowData.devno || "暂无编号" }}</div>
                </div>
                <div class="costom-info">
                    <div class="title">设备型号：</div>
                    <div class="data">{{ rowData.type_name || '--' }} <span class="font_size12 font_black8">（{{
                            rowData.type_code || '' }}）</span></div>
                </div>
                <div class="costom-info">
                    <div class="title">设备状态：</div>
                    <div :class="['data', rowData.status == 5 ? 'font_green' : 'font_red']" >{{ rowData.status_txt || "--" }}</div>
                </div>
                <div class="costom-info">
                    <div class="title">云店：</div>
                    <div class="data">{{ rowData.shop_title || '--' }}</div>
                </div>
                <div class="costom-info">
                    <div class="title">创建时间：</div>
                    <div class="data">{{ rowData.time_txt || '--' }}</div>
                </div>
                <div class="costom-info">
                    <div class="title">企业名称：</div>
                    <div class="data">{{ rowData.cp_title || '--' }}</div>
                </div>
                <div class="costom-info">
                    <div class="title">经办人：</div>
                    <div class="data">
                        {{ rowData.cp_uname || "--" }}
                    </div>
                </div>
            </div>
        </div>
    </ayjDialog>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance, watch, onUnmounted, computed, onBeforeUnmount, defineProps } from '@vue/composition-api'
import config from "@/js/conf/Config.js"
// 获取当前组件实例
const { proxy } = getCurrentInstance()

onMounted(() => {
})

const props = defineProps({
    data: {
        type: Object,
        default: () => { }
    }
})

const rowData = ref({})
watch(() => props.data, (newVal) => {
    if (newVal) {
        rowData.value = newVal
    }
}, { deep: true })

const dialoRef = ref(null)
const open = (row) => {
    dialoRef.value.open()
}

const close = () => {
    dialoRef.value.close()
}

defineExpose({
    open, close
})

</script>

<style lang="scss" scoped>
.costom-row {
    border-bottom: 2px #f3f3f3 solid;
    padding-bottom: 10px;
    margin-bottom: 10px;

    &:last-child {
        border: none;
    }

    .costom-info {
        height: 40px;
        display: flex;
        align-items: center;
        font-size: 14px;
        border-bottom: 1px solid #f4f4f4;


        .title {
            width: 90px;
            color: #797979;
        }

        .data {
            color: #333;

            &.color-g {
                color: #23c064;
            }

            &.color-r {
                color: #fa5757;
            }
        }
    }
}
</style>